<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <!--<link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">-->
    <link rel="stylesheet" href="ol/ol.css" type="text/css">
    <style>
        .map {
            width: 99%;
            height: 99%;
            position: absolute;
        }
    </style>
    <!--<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>-->
    <script src="ol/ol.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
    <title>OpenLayers Map</title>
</head>

<body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
        var tian_di_tu_road_layer = new ol.layer.Tile({
            title: "天地图路网",
            source: new ol.source.XYZ({
                url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e7aa32db2e826fe71873ce8d58d0d1a2"
            })
        });
        tian_di_tu_road_layer.setOpacity(0.8);
        //加载天地图--注记图层
        var tian_di_tu_annotation = new ol.layer.Tile({
            title: "天地图文字标注",
            source: new ol.source.XYZ({
                url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e7aa32db2e826fe71873ce8d58d0d1a2'
            })
        });
        //这个是本地配置的GeoServer服务器发布的WMS服务地图
        var wmsSource = new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: 'http://192.168.1.1:8080/geoserver/testNew1/wms',
                params: { 'LAYERS': 'testNew1:function_layer', 'singleTile': true }

            })
        });
        wmsSource.setOpacity(0.5);
        //加载热力图数据
        /*
        var vector = new ol.layer.Heatmap({
            source: new ol.source.KML({
                url: 'data/kml/2012_Earthquakes_Mag5.kml',
                projection: 'EPSG:3857',
                extractStyles: false
            }),
            blur: parseInt(blur.value, 10),
            radius: parseInt(radius.value, 10)
        });
        
        var vector=new ol.layer.Heatmap({
            source: new ol.source.GeoJSON({
                url: 'data/heatmap.json',
                projection: 'EPSG:4326',
                extractStyles: false,
                format: new ol.format.GeoJSON()
            }),
            blur: parseInt(blur.value, 10),
            radius: parseInt(radius.value, 10)
        })
        */
        //Map本体
        var map = new ol.Map({
            target: 'map',
            controls: [new ol.control.FullScreen(),
            new ol.control.ScaleLine(),
            new ol.control.ZoomSlider(),
            ],
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                //new ol.layer.Tile({
                    //source: new ol.source.MapQuest({layer:'osm'})
                //}),
                tian_di_tu_road_layer,
                tian_di_tu_annotation
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([114.393, 30.508]),
                zoom: 14,
                maxZoom: 18,
                minZoom: 5
            })
        });

    </script>
</body>

</html>